<template>
  <div class="container">
    <div v-if="!utils.getIsApp()" class="common-header-wrap">
      <mt-header class="common-header" title="直播">
        <mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button>
      </mt-header>
    </div>

    <!--        <index-banner v-if="banners && banners.length > 0" :items="banners"></index-banner>-->

    <!--        直播-->
    <div class="live-head-title">直播</div>
    <div class="live-now" v-for="item in livenowlist" @click="toLive(item)">
      <!--            <div class="live-type">·直播中</div>-->
      <img class="live-now-pic" :src="item.image" />
      <div class="live-now-foot">
        <div class="live-now-infomation">
          <!-- <img class="live-now-user-img" :src="item.head" /> -->
          <div class="live-now-user-name">{{ item.name }}</div>
        </div>
        <div class="live-now-title">{{ item.brief }}</div>
      </div>
    </div>

    <!--        回放-->
    <div class="live-head-title">回播</div>
    <div
      class="live-repeat"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
    >
      <div class="live-list" v-for="item in livelist" @click="toLive(item)">
        <!--                <div class="live-repeat-type">·回播</div>-->
        <img class="live-list-img" :src="item.image" />
        <div class="live-list-foot">
          <div class="list-foot-text">
            <div class="list-foot-title">{{ item.name }}</div>
            <div class="list-foot-introduce">{{ item.brief }}</div>
          </div>
          <!-- <img class="list-foot-img" :src="item.head" /> -->
        </div>
      </div>
      <!-- <empty-record v-if="livelist.length <= 0 && !isMore"></empty-record> -->
    </div>

    <!--        <div class="information-menu">-->
    <!--            <div class="menu-list" :class="param==1?'menu-active':''" @click="switchmenu(1)">-->
    <!--                正在直播-->
    <!--            </div>-->
    <!--            <div class="menu-list" :class="param==2?'menu-active':''" @click="switchmenu(2)">-->
    <!--                直播回放-->
    <!--            </div>-->
    <!--        </div>-->

    <!--        <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">-->
    <!--            <div class="information-live" v-for='(item,index) in livelist' v-bind:key='index'-->
    <!--                 @click="toLive(item.link)">-->
    <!--                <img class="information-video" :src="item.image">-->
    <!--                <div class="information-live-title">-->
    <!--                    {{item.name}}-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <empty-record v-if='livelist.length <= 0 && !isMore'></empty-record>-->
    <!--        </div>-->
  </div>
</template>

<script>
// import IndexBanner from '../index/IndexBanner'

import { getLiveList } from "../../../api/lives";
import { Toast, Indicator } from "mint-ui";
// import { mapState } from 'vuex'

export default {
  name: "Live",
  data() {
    return {
      livelist: [], // 回放数据
      livenowlist: [], //直播数据
      params: {
        page: 0,
        per_page: 10,
      },
      keyword: "",
      param: 1, //直播类型 1:正在直播/2:直播回放
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
    };
  },
  mounted() {
    this.getLiveNowList();
  },
  // components: {
  //     IndexBanner,
  // },
  // computed: {
  //     ...mapState({
  //         banners: state => state.home.banners,
  //     })
  // },
  methods: {
    //上拉加载
    loadMore() {
      console.log(12121212)
      this.loading = true;
      this.params.page = ++this.params.page;
      if (this.isMore) {
        console.log(23232)
        this.loading = false;
        this.getLiveList();
        this.isMore = false;
      }
    },

    //获取直播数据
    getLiveNowList() {
      getLiveList({ page: 1, per_page: 100 }, this.keyword, 1).then((res) => {
        this.livenowlist = res.result;
      });
    },
    //获取回放数据
    getLiveList() {
      getLiveList(this.params, this.keyword, 2).then((res) => {
        if (res.result.hasmore) {
          this.isMore = true;
        } else {
          this.isMore = false;
        }
        if (this.livelist) {
          this.livelist = this.livelist.concat(res.result);
        } else {
          this.livelist = res.result;
        }
      });
    },
    toLive(item) {
      // console.log(item);
      // this.$router.push({
      //   name: "HomePlayback",
      //   query: { video_Id: item.id},
      // });
      // return;
      if (item.link_type == 1) {
        window.location.href = item.link;
      } else if (item.link_type == 2) {
        Indicator.open();
        setTimeout(() => {
          Indicator.close();
        }, 300);
        this.$router.push({
          name: "HomePlayback",
          query: { video_Id: item.id },
        });
      }
    },
    switchmenu(index) {
      this.param = index;
      this.livelist = [];
      this.params = { page: 0, per_page: 10 };
      this.isMore = true;
      this.loadMore();
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  background: #fff;
}
.live-head-title {
  width: 92vw;
  margin: auto;
  margin-top: 5vw;
  font-size: 0.8rem;
  font-weight: bold;
  border-left: 4px solid $primaryColor;
  padding-left: 10px;
  box-sizing: border-box;
  color: $primaryColor;
}
.information-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background: white;
  margin-top: 10px;
  padding: 5px 20px;
}

.menu-list {
  padding: 5px 0;
  font-size: 0.6rem;
  border-bottom: 2px solid white;
}

.menu-active {
  color: $primaryColor;
  border-bottom: 2px solid $primaryColor;
}

.information-live {
  margin-top: 10px;
  background: white;
  padding: 2vw 4vw;
}

.information-video {
  width: 92vw;
  height: 46vw;
}

.information-live-title {
  font-size: 0.7rem;
  font-weight: bold;
}

.live-now {
  margin: auto;
  width: 92vw;
  margin-top: 5vw;
  //   box-shadow: 0 0 10px #ccc;

  .live-type {
    position: absolute;
    left: 10px;
    top: 10px;
    background: $primaryColor;
    color: white;
    font-size: 0.6rem;
    font-weight: bold;
    border-radius: 3px;
    padding: 5px 10px;
  }

  .live-now-pic {
    width: 92vw;
    height: 61vw;
    border-radius: 3px;
    overflow: hidden;
  }

  .live-now-foot {
    width: 92vw;
    bottom: 0;
    left: 0;
    padding: 10px 0;
    box-sizing: border-box;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;

    .live-now-infomation {
      display: flex;
      flex-direction: row;
      align-items: center;

      .live-now-user-img {
        width: 35px;
        height: 35px;
        border-radius: 50px;
        box-shadow: 0 0 10px #ccc;
      }

      .live-now-user-name {
        // margin-left: 10px;
        font-size: 0.8rem;
        line-height: 1.2rem;
      }
    }

    .live-now-title {
      font-size: 0.6rem;
      color: #999;
    }
  }
}

.live-repeat {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 2.8vw 4vw;

  .live-list {
    position: relative;
    // box-shadow: 0 0 10px #ccc;
    margin-top: 10px;
    .live-repeat-type {
      position: absolute;
      left: 10px;
      top: 10px;
      background: $primaryColor;
      color: white;
      font-size: 0.6rem;
      font-weight: bold;
      border-radius: 3px;
      padding: 5px 10px;
    }
    .live-list-img {
      width: 44vw;
      height: 33vw;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
    }
    .live-list-foot {
      padding: 10px 0;
      background: white;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .list-foot-text {
        width: calc(40vw - 20px);
        .list-foot-title {
          font-size: 0.7rem;
          line-height: 1rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .list-foot-introduce {
          font-size: 0.6rem;
          color: #b5b5b5;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .list-foot-img {
        width: 35px;
        height: 35px;
        border-radius: 50px;
      }
    }
  }
}
</style>
